<template>
	<view>
		<image :src="tempImage" style="width: 100%; height: 415px;"></image>
		<!-- <view v-if="isDraw"> -->
		<drawImage :isDraw="isDraw" :canvasData="canvasData" :imageSize="{width: 375, height: 415}"
			@generateImageSuccessful="generateImageSuccessful" />
		<!-- </view> -->

		<!-- <view class="wrap">
			<view class="line1">
				微信扫码连WiFi
			</view>
			<view class="line2">
				一键快速连接·无需密码·安全防蹭网
			</view>
			<view class="image">
<image :src="wifiData.qrcode_file" mode="aspectFit" style="width:70%;"></image>
			</view>
			<view class="line3">
				<view>
					{{wifiData.provider_name}}
				</view>
				<view class="line3_1">
					无需密码，扫码就能连！
				</view>
			</view>
			
		</view> -->
		<view class="bottom-tool">
			<view class="tool">
				<view class="icon-wrap">
					<uni-icons custom-prefix="iconfont" type="icon-print" size="32" color="#ffffff"
						@click="openPrintModal"></uni-icons>
				</view>
				<text class="text">
					打印
				</text>
			</view>

			<view class="tool">
				<view @click="saveQrcode" class="icon-wrap">
					<uni-icons custom-prefix="iconfont" type="icon-baocuntupian" size="32" color="#ffffff"></uni-icons>

				</view>
				<text class="text">小程序码</text>
			</view>
			<view class="tool">
				<view @click="saveImage" class="icon-wrap">
					<uni-icons custom-prefix="iconfont" type="icon-baocuntupian" size="32" color="#ffffff"></uni-icons>

				</view>
				<text class="text">推广海报</text>
			</view>
		</view>
		<printModal ref="modalPrint" :tempImage="wifiData.qrcode_file"></printModal>
	</view>
</template>


<script>
	import {
		ref
	} from "vue"
	import printModal from "@/components/print-modal/print-modal.vue"
	export default {
		data() {
			return {
				formData: {
					id: '',
					name: '',
					wifiname: '',
					wifipwd: '',
					wifiList: [],
					wifiUrl: "",
				},
				// 是否开始绘制
				isDraw: false,
				/**
				 * 需要绘制的图片数据 - 具体参数需要看组件内的
				 * { type: 'rect',  attr: { color: '', x, y, width, height, radian_1, radian_2, radian_3, radian_4 } }
				 * { type: 'image', attr: { image: '', x, y, width, height, radian_1, radian_2, radian_3, radian_4 } }
				 * { type: 'text',  attr: { text: '', x, y, color, size, weight, writingMode } }
				 * */
				canvasData: [],
				tempImage: null
			}
		},
		components:{
			printModal
		},
		onReady() {
			uni.showLoading({
				title: '加载中'
			});
		},
		
		onLoad(res) {
			var that = this
			if (Object.keys(res).length != 0) {
				const {
					screenWidth
				} = uni.getSystemInfoSync();
				console.log(screenWidth)
				var wifi = JSON.parse(decodeURIComponent(res.params));
				that.$data.formData.wifiUrl = wifi.wifiUrl
				that.$data.formData.name = wifi.storeName
				that.$data.formData.wifiname = wifi.wifiName
				that.$data.formData.wifipwd = wifi.wifiPwd
				that.$data.canvasData = [{
						type: 'rect',
						attr: {
							color: 'white',
							x: 24,
							y: 24,
							width: screenWidth - 48,
							height: 358
						}
					},
					{
						type: 'text',
						attr: {
							text: '微信扫码连WiFi',
							x: (screenWidth - 140) / 2,
							y: 56,
							color: '#333333',
							size: 20,
							weight: '500',
							writingMode: 'initial'
						}
					},
					{
						type: 'text',
						attr: {
							text: '一键快速连接·无需密码·安全防蹭网',
							x: (screenWidth - 202) / 2,
							y: 80,
							color: '#666666',
							size: 14,
							weight: '300',
							writingMode: 'initial'
						}
					},
					{
						type: 'image',
						attr: {
							image: that.$data.formData.wifiUrl,
							x: (screenWidth - 200) / 2,
							y: 100,
							width: 200,
							height: 200,
							writingMode: 'initial'
						}
					},
					{
						type: 'rect',
						attr: {
							color: '#007aff',
							x: 24,
							y: 312,
							width: screenWidth - 48,
							height: 70
						}
					},
					{
						type: 'text',
						attr: {
							text: that.$data.formData.name ,
							x: (screenWidth - that.$data.formData.name.length * 14) / 2,
							y: 338,
							color: '#ffffff',
							size: 20,
							writingMode: 'initial'
						}
					},
					{
						type: 'text',
						attr: {
							text: "无需密码，扫码就能连！",
							x: (screenWidth - 140) / 2,
							y: 360,
							color: '#ffffff',
							size: 14,
							writingMode: 'initial'
						}
					},
				];
				that.$data.isDraw = true;
				that.generateImageSuccessful()
				// that.submitStatus=false
			}

		},
		methods: {
			openPrintModal () {
				console.log("点击打印")
				this.$refs.modalPrint.openPop('center')
				// modalPrint.value.openPop('center')
			},
			saveQrcode() {
				const that = this
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// console.log("用户已授权")
						// 已授权
						uni.downloadFile({
							url: that.$data.formData.wifiUrl,
							success: (res) => {
								// console.log("res---downloadFile", res)
								uni.hideLoading();
								if (res.statusCode === 200) {
									that.downLoadImg(res.tempFilePath);
								}
							},
							fail: (err) => {
								// console.log("保存失败？", err)
								uni.showToast({
									title: "失败啦",
									icon: "none"
								});
							}
						})
			
					},
					fail: () => {
						uni.showToast({
							title: "用户取消授权",
							icon: "none"
						});
					}
				})
			},
			
			
			saveImage() {
				const that = this
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// console.log("用户已授权")
						// 已授权
						that.downLoadImg(this.tempImage);
					},
					fail: () => {
						uni.showToast({
							title: "用户取消授权",
							icon: "none"
						});
					}
				})
			},
			async downLoadImg(image) {
				// console.log("下载图片")
				if (!image) {
					uni.showToast({
						title: "未找到图片",
						icon: "none"
					});
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				uni.saveImageToPhotosAlbum({
					filePath: image,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: "保存失败，请稍后重试",
							icon: "none"
						});
					}
				});
			
			
			},
			
			/** 绘制成功后的回调 - 返回一个临时路径 */
			generateImageSuccessful(image) {
				// console.log("image", image)
				uni.hideLoading();
				this.tempImage = image;
			},
			createwifi: function() {
				// console.log("aa")
				uni.navigateTo({
					url: "/subPackpages/createWifi/createWifi"
				})
			},
			managewifi: function() {
				uni.navigateTo({
					url: "/subPackpages/wifi-list/wifi-list"
				})
			}
		}


	}
</script>
<style>
	@import "./wifiSetting.css";
</style>


<style lang="scss">
	.wrap {
		margin: 32rpx 48rpx;
		text-align: center;
		background-color: #ffffff;
		padding-top: 24rpx;
		border-radius: 10px;

	}

	.line1 {
		font-size: 48rpx;
		text-align: center
	}

	.line2 {
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		margin-top: 20rpx;
	}

	.image {
		margin-top: 48rpx;
	}

	.line3 {
		background-color: $uni-color-primary;
		padding: 24rpx 0;
		color: #ffffff;
	}

	.line3_1 {
		margin-top: 10px;
	}

	.icon-wrap {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: $uni-color-primary;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-tool {
		flex-direction: row;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tool {
		width: 50%;
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text {
		margin-top: 10px;
		color: #666666;
	}
</style>